<template>

<!--  手机播放-->
<!--  that.playerOptions.poster-->
  <div v-if="isPhone" class="videoPlayerCompent" :class="{ showRefish: refish }" style="padding-top: 56.25%;background-position: center;background-size: 100% 100%;background-repeat: no-repeat;background-color: #000;" :style="{backgroundImage:'url(' + playerOptions.poster +')'}">
<!--    <div v-if="refish" class="refish">直播开小差了</div>-->
    <div v-if="!refish&&isLive" class="refish">
      <div @click="vplay1" v-if="liveType==3||liveType==1" v-html="tips"></div>
      <div v-else v-html="tips"></div>
    </div>
    <videoJs ref="wzVideoJs" v-if="wzVideoType"  style="width: 100%;height: 100%;position: absolute;top: 0px;" :playerOptions="playerOptions" :isPhone="isPhone"></videoJs>
<!--    <video-player ref="liveVideo" v-if="showVideoPlayer" class="myVideoPlayer" :options="playerOptions" webkit-playsinline="true" x-webkit-airplay="true" playsinline @play="onPlayerPlay" @pause="onPlayerPause" @ended="onPlayerEnded" @error="onError()"/>-->
  </div>
<!--  PC播放-->
<!--  :style="{height:wHeight+'px', width:wWidth+'px', background: '#000'}"         蓝色  3795fc-->
  <div v-else class="videoPlayerCompent" style="height: 100%;background-position: center;background-size: 100%;background-repeat: no-repeat;background-color: #000;" :style="{backgroundImage:'url(' + playerOptions.poster +')'}">
<!--    <h2 class="live-tit">主会场直播间</h2>-->
<!--    <div v-if="refish" class="refish">直播开小差了</div>-->
    <div v-if="!refish&&isLive" class="refish">
      <div @click="vplay1" v-if="liveType==3||liveType==1" v-html="tips"></div>
      <div v-else v-html="tips"></div>
    </div>
    <videoJs ref="wzVideoJs" v-if="wzVideoType"  style="width: 100%;height: 100%;" :playerOptions="playerOptions" :isPhone="isPhone"></videoJs>
<!--    :style="{height:(wHeight - 30)+'px', width:wWidth+'px'}"-->
<!--    <video-player v-if="showVideoPlayer" ref="liveVideo" class="myVideoPlayer" style="width: 100%;height: 100%;"  :options="playerOptions" webkit-playsinline="true" x-webkit-airplay="true" playsinline @play="onPlayerPlay" @pause="onPlayerPause" @ended="onPlayerEnded" @error="onError()"/>-->
  </div>
</template>
<script>
import "videojs-flash";
import "videojs-contrib-hls";
import { videoPlayer } from "vue-video-player";

import { getNowTime } from "../utils/index";

import videoJs from "@/components/videoJs.vue";
import MsgBus from "../utils/bus";
export default {
  components: {
    videoJs,
  },
  props:["src","poster","wHeight","wWidth","isPhone",],
  data() {
    return {
      wzVideoType:false,
      refish: false, //直播状态更改
      isLive: false,
      liveType: 0, //0未开始 1一开始 2结束 3视频返回来了，可回放
      showVideoPlayer: true,
      liveInfo: {},
      tips: "",
      // start: require("../assets1/pc_start.jpg"),
      // end: require("../assets1/pc_end.jpg"),
      isReplay: false, //是否可以回放
      timermont: "", //计时器
      type: 1, //直播间类型
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // type: "video/mp4", // 类型
            // src: that.src // url地址
            withCredentials: false,
            type: "application/x-mpegURL",
            src: ""
          }
        ],
        poster: null, // 封面地址
        // poster: require("../assets1/live_bg.jpg"), // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },


      userData:{},
      studyTime:null,//学习定时
    };
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;



    // that.executionTiming();


    //更换直播封面
    //获取直播详情
    that.type = that.getQueryName("type");
    that.changePoster(that.type);
    that.getLiveDetail(() => {
      //判断什么时候开启直播
      that.liveStatusChange();
    });
    //message那发回回放视频的地址，做更新
    MsgBus.$on("sendMsg", e => {
      console.log(e);
      //接收回放地址
      if (e.type == 1) {
        that.liveType = 3; //直播结束
        that.tips = "<div class='mobshow'>查看回放视频</div>";
        that.playerOptions["sources"][0]["type"] = "video/mp4";
        that.playerOptions["sources"][0]["src"] = e.msg;

        if(that.liveInfo.meetingId == '2'){//带中英文
          that.http.getMeetingById({meetingId: that.type}).then(res => {
            if (res.status == 1000) {
              that.playerOptions.pullEnUrl = res.data.replayEnUrl;
              that.playerOptions.pullUrl = res.data.replayUrl;
              that.playerOptions.meetingId = res.data.meetingId;
              that.wzVideoType = true;
            }
          }).catch(err => {

          });
        }else{
          that.wzVideoType = true;
        }
      } else {
        //接收结束时间
        that.liveInfo.secondsEnd = e.msg;
      }
    });
  },
  methods: {//执行的方法
    executionTiming(){
      let that = this;

      /*
     * 此处需要获取用户数据
     * 定时1分钟 向后台请求一次
     * 如果30分钟后 执行弹框
     *
     * */
      //判断用户是否登录
      if (!localStorage.getItem("userData")) {
        // that.$refs.peoplePopup.open(that.$store.state.isMobile);
      } else {
        that.userData = JSON.parse(localStorage.getItem("userData"))

        that.studyTime = setInterval(function(){
          // console.log('1分钟 向后台请求一次')
          // console.log('在把用户的学习时长 +1，然后在存储到浏览器里面')

          // 在把用户的学习时长 +1，然后在存储到浏览器里面
          that.http.forumAddTime({userId:that.userData.userId}).then(res => {
            if (res.status == 1000) {
              //学习时长
              that.userData.minute = parseInt(that.userData.minute) + 1;
              localStorage.setItem("userData", JSON.stringify(that.userData));
              // if(that.userData.minute == 3 * 60){//三个小时后 弹框
              //   // questionnaireTypeFun
              //
              //   that.$emit("questionnaireTypeFun")
              //   // that.questionnaireType = true;
              // }

            }else{
              // that.$toast.fail({duration:5000,message:res.data.message,closeOnClick:true})
            }
          }).catch(err => {
            that.$toast.clear();
          });

        // },500)
        },60 * 1000)

      }

    },
    liveStatusChange() {
      let that = this;
      that.timermont = setInterval(() => {
        var start = that.liveInfo.secondsStart--;
        var end = that.liveInfo.secondsEnd--;
        // console.log(end);
        // var now = new Date().getTime();
        // var start = new Date(
        //   that.liveInfo.startTime.replace(/-/g, "/")
        // ).getTime();
        // var end = new Date(that.liveInfo.endTime.replace(/-/g, "/")).getTime();

        //直播开启了
        //TODO
        // 直播
        // start = 0;
        // end = 1;
        // //未开启
        // start = 1;
        // end = 0;
        // //录播
        // start = -1;
        // end = -1;
        // that.liveInfo.pullUrl = 'https://api.xdbj.net.cn:9447/media/educate/dept/training_material/material_file/f2820831-637c-457e-8f53-a2ae1c39e254/17a63b02-fc7d-422a-99fe-cee0d32d4eaf/sd_m3u8/1645090391935.m3u8';
        // that.liveInfo.pullEnUrl = 'https://api.xdbj.net.cn:9447/media/educate/dept/training_material/material_file/f2820831-637c-457e-8f53-a2ae1c39e254/17a63b02-fc7d-422a-99fe-cee0d32d4eaf/sd_m3u8/1645090391935.m3u8';
        // that.liveInfo.replayUrl = 'https://osstest.sumaokeji.com/TTNew/TTliveVideo.mp4';
        // that.isReplay = true;
        if (start <= 0 && end > 0) {
          if (!that.playerOptions["sources"][0]["src"]) {
            that.playerOptions["sources"][0]["type"] = "application/x-mpegURL";
            that.playerOptions["sources"][0]["src"] = that.liveInfo.pullUrl;
            that.isLive = true;
          }
          that.liveType = 1;
          that.tips = "<div class='mobshow'>点击进入直播间</div>";
          that.wzVideoType = true;

          if(that.liveInfo.meetingId == '2'){//带中英文
            that.playerOptions.pullEnUrl = that.liveInfo.pullEnUrl;
            that.playerOptions.pullUrl = that.liveInfo.pullUrl;
            that.playerOptions.meetingId = that.liveInfo.meetingId;
          }

          // that.executionTiming();
          return;
        }
        //直播未开启
        if (start > 0) {
          that.tips = "<div class='mobnolive'>直播未开启</div>";

          that.isLive = true;
          that.liveType = 0; //直播未开启
          that.showVideoPlayer = true;
          // that.wzVideoType = true;
          return;
        }
        //直播结束
        if (end < 0) {
          that.refish = false;
          that.isLive = true;
          that.tips = "<div class='mobnolive'>直播已结束</div>";
          that.playerOptions["sources"][0]["src"] = "";
          that.changePoster(that.type);
          that.liveType = 2; //直播结束
          MsgBus.$emit("sendIsEnd", true);
          if (that.isReplay) {
            that.liveType = 3; //直播结束
            that.tips = "<div class='mobshow'>查看回放视频</div>";
            that.playerOptions["sources"][0]["type"] = "video/mp4";
            that.playerOptions["sources"][0]["src"] = that.liveInfo.replayUrl;

            if(that.liveInfo.meetingId == '2'){//带中英文
              that.playerOptions.pullEnUrl = that.liveInfo.replayEnUrl;
              that.playerOptions.pullUrl = that.liveInfo.replayUrl;
              that.playerOptions.meetingId = that.liveInfo.meetingId;
            }

            that.wzVideoType = true;
          }else{
            that.wzVideoType = false;
          }
          clearInterval(that.timermont);

          // that.executionTiming();
          return;
        }
      }, 1000);
    },
    //视频播放
    vplay() {
      let that = this;
      that.videoReload();
    },
    //视频播放
    vplay1(){
      let that = this;
      that.$toast.loading({message: "加载中...", forbidClick: true});
      that.$refs.wzVideoJs.wzPlay();
      that.executionTiming();
      that.refish = true;
    },
    // 播放回调
    onPlayerPlay(player) {
      let that = this;
      that.isLive = false;
      that.$toast.clear();
    },
    // 暂停回调
    onPlayerPause(player) {},
    onPlayerEnded() {
      let that = this;
      that.playerOptions.poster = that.end;
    },
    videoReload() {
      let that = this;
      that.$toast.loading({message: "加载中...", forbidClick: true});
      that.$refs.liveVideo.player.play();
    },
    getLiveDetail(fn) {
      let that = this;
      that.http.getMeetingById({meetingId: that.type}).then(res => {
        if (res.status == 1000) {
          fn();
          that.liveInfo = res.data;
          var isEnd = res.data.secondsEnd <= 0 ? true : false;
          MsgBus.$emit("sendIsEnd", isEnd);
          if (res.data.replayUrl) {
            that.isReplay = true;
          }
        }
      }).catch(err => {

      });
    },
    onError() {
      let that = this;
      that.refish = true;
    },






    //更换封面
    changePoster(type) {
      let that = this;
      // type //想要判断的变量
      switch (type) {
        case '1660615598539018241': //"开幕式主论坛"
          that.playerOptions.poster = require("../assets1/viodeImg/1660615598539018241.jpg");
          break;
        case '1660615797369999362': //医院管理者国际研讨会
          that.playerOptions.poster = require("../assets1/viodeImg/1660615797369999362.jpg");
          break;
        case '1660616134180999170': //国家医学中心与区域医疗中心建设
          that.playerOptions.poster = require("../assets1/viodeImg/1660616134180999170.png");
          break;
        case '1660616355984183298': //“国考”背景下医院绩效管理实践
          that.playerOptions.poster = require("../assets1/viodeImg/1660616355984183298.png");
          break;
        case '1660616552315359233': //“三医协同”药品保障
          that.playerOptions.poster = require("../assets1/viodeImg/1660616552315359233.png");
          break;
        case '1660616885724778498': //临床研究质量提升与医学伦理
          that.playerOptions.poster = require("../assets1/viodeImg/1660616885724778498.png");
          break;
        case '1660922763292184578': //"党风廉政专题会"
          that.playerOptions.poster = require("../assets1/viodeImg/1660922763292184578.png");
          break;
        case "1660617126024843265": //"中医分论坛：守正创新，传承发展"
          that.playerOptions.poster = require("../assets1/viodeImg/1660617126024843265.png");
          break;
        case '1660617398348419073': //"妇幼健康促进与优势科学建设"
          that.playerOptions.poster = require("../assets1/viodeImg/1660617398348419073.png");
          break;
        // case 10: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/10.png");
        //   break;
        // case 11: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/11.png");
        //   break;
        // case 12: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/12.png");
        //   break;
        // case 13: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/13.png");
        //   break;
        // case 14: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/14.png");
        //   break;
        // case 15: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/15.png");
        //   break;
        // case 16: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/16.png");
        //   break;
        // case 17: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/17.png");
        //   break;
        // case 18: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/18.png");
        //   break;
        // case 19: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/19.png");
        //   break;
        // case 20: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/20.png");
        //   break;
        // case 21: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/21.png");
        //   break;
        // case 22: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/22.png");
        //   break;
        // case 23: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/23.png");
        //   break;
        // case 24: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/24.png");
        //   break;
        // case 25: //状态一
        //   that.playerOptions.poster = require("../assets1/viodeImg/25.png");
        //   break;
      }
    }
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态
    let that = this;
    clearInterval(that.timermont);
    clearInterval(that.studyTime);
  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="scss">

.videoPlayerCompent .video-js .vjs-poster{
  background-size: 100%!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
}
.showRefish {
  //   .vjs-modal-dialog{
  // background: none;
  //   }
  .video-js {
    .vjs-big-play-button {
      // 调整播放器样式
      border: none;
      background-color: rgba(0, 0, 0, 0) !important;
      .vjs-icon-placeholder {
        //调整播放器样式
        &::before {
          display: none;
        }
      }
    }
  }
}
.videoPlayerCompent {
  // border-radius: 0.2rem;
  .video-js {
    // position: absolute;
    // width: 4.75rem;
    // height: 2.67rem;
    overflow: hidden;
    // border-radius: 0.2rem;
    background-color: rgba(0, 0, 0, 0);
    // height: 3.05rem;
    .vjs-poster {
      background: none;
    }
    .vjs-error-display {
      .vjs-modal-dialog-content {
        display: none;
      }
      &::before {
        display: none;
      }
    }
    .vjs-tech {
      // border-radius: 0.2rem;

      // width: 4.73rem;
      //     height: 3.05rem;
    }
    .vjs-big-play-button {
      // 大播放按钮
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // border: 1px solid red;
      margin: auto auto;
      background-color: rgba(0, 0, 0, 0);
      width: 1.06rem;
      height: 1.06rem !important;
      border-radius: 50%;
      background-color: #a9a9a9;
      border-color: none;
      &:focus {
        background-color: rgba(0, 0, 0, 0);
      }
      &:active {
        background-color: rgba(0, 0, 0, 0);
      }
      .vjs-icon-placeholder {
        //调整播放器样式
        &::before {
          color: #fff;
          font-size: 0.6rem;
          line-height: 1rem;
          margin-left: -0.02rem;
        }
      }
    }
    .vjs-control-bar {
      background-color: rgba(235, 235, 235, 0.8);
      .vjs-play-control {
        // 重播按钮
        width: 0.8rem;
        z-index: 111;
        outline: none;
        bottom: 0.1rem;
        left: 0.15rem;
        .vjs-icon-placeholder {
          &::before {
            color: #fff;
            // font-size: 0.4rem;
            padding-top: 0.1rem;
          }
        }
      }

      // .vjs-volume-panel-horizontal {
      //   position: absolute;
      //   right: 0.5rem;
      // }
      .vjs-duration {
        // 总时间
        position: absolute;
        right: 0;
        color: #e2e2e2;
      }
      .vjs-current-time {
        // 播放时间
        position: absolute;
        left: 0.72rem;
        color: #e2e2e2;
      }
      .vjs-playback-rate {
        display: none;
      }
      .vjs-progress-control {
        // width: 90%;
        // position: absolute;
        // left: 0.7rem;
        // 进度条
        .vjs-progress-holder {
          // margin-left: -0.38rem;
          // margin-bottom: 0.6rem;
          background: #b8b8b8;
          // height: .12rem;
          .vjs-load-progress {
            background: #b8b8b89a;
          }
          .vjs-play-progress {
            // background: #fd1216;
          }
        }
      }
    }
    .vjs-poster {
      background-size: cover;
    }
  }
}
.videoPlayerCompent {
  position: relative;
}
.refish {
  //background: rgba(0,0,0,0.4);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11;
  img {
    width: 1.2rem;
  }
}
.live-tit {
  height: 0.6rem;
  line-height: 0.6rem;
  background: #262531;
  color: #fff;
  text-align: left;
  padding-left: 20px;
}
.mobshow {
  background: rgba(0, 0, 0, 0.3);
  width: 3rem;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.1rem;
  font-size: 0.3rem;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.mobnolive {
  font-size: 0.4rem;
  color: #fff;
  font-weight: bold;
  line-height: 0.5rem;
}
.timefont {
  font-size: 0.2rem !important;
}
.video-js.vjs-fluid{
  height: 100%;
}
</style>
